<template>
	<view class="login-page">
		<view class="login-header">
			<fui-toast ref="toast"></fui-toast>
			<view class="login-header-content">
				<view class="login-header-logo">
					
				</view>
				<view class="login-title">
					<text>手机快捷登录</text>
				</view>
				<view class="login-title-describe">
					<text>首次登录会自动创建账号</text>
				</view>
			</view>
		</view>
		<view class="login-body">
			<view class="login-body-content">
				<view class="">
					
				</view>
				<view class="login-tel-top">
					<view class="user-tel">
						<input type="number" placeholder="请输入手机号" placeholder-class="plc">
					</view>
					<view class="get-security-code-btn">
						<text>获取验证码</text>
					</view>
				</view>
				<view class="login-tel-bottom">
					<input type="number" placeholder="请输入验证码" placeholder-class="plc">
				</view>
			</view>
			
			
			<view class="login-btn-box">
				<view class="password-login" @click="toPasswordLogin()">
					<button type="default" >密码登录</button> 
				</view>
				<view class="immediately-login">
					<button type="warn" @click="showToast()">一键登录</button>
				</view>
			</view>
			
			<view class="protocol-box">
				<view class="protocol-contents">
					<label>
						<checkbox :value="checkBoxValue" class="loginCheckBox" /><text style="color: rgb(195, 192, 191);">我已阅读并同意</text>
					</label>
					<text style="font-weight: 600;color: rgba(0,0,0,0.8);"><a href="" style="text-decoration: none;color: black;">《用户使用协议》</a></text>
					<text>和</text>
					<text style="font-weight: 600;color: rgba(0,0,0,0.8);"><a href="" style="text-decoration: none;color: black;">《“LjqForm”个人信息保护政策》</a></text>
				</view>
			</view>
			
		</view>
		<view class="login-footer">
			<view class="login-footer-content">
				<view class="login-footer-title">
					<view class="login-footer-title-content">
						<text>使用其他方式登录</text>
					</view>
				</view>
				<view class="logo-list">
					<view class="logo-list-item">
						<view class="logo-list-item-content">
								<image src="../../static/images/QQ.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="logo-list-item">
						<view class="logo-list-item-content">
							<image src="../../static/images/wchat.png" mode="heightFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	//Toast组件官方文档  https://doc.firstui.cn/docs/operate/toast.html
	import { getCurrentInstance,reactive } from 'vue'
	const checkBoxValue = "protocol agree"
	const that = getCurrentInstance()
	const toastOptions = reactive({
		text:"功能还未实现"
	})
	const toPasswordLogin = () =>{
		uni.navigateTo({
			url:'/pages/Login/LoginPassword/LoginPassword'
		})
	}
	
	const showToast = () =>{
		that.ctx.$refs.toast.show(toastOptions)
	}
	
</script>


<style lang="scss" scoped>
	body{
		background-color: #f9f9f9;
		// overflow-y:hidden;
	}
	uni-button[type='default']{
		background-color: #fff;
		font-weight:600 ;
		color: rgba(0,0,0,0.7);
	}
	
	uni-button[type='warn']{
		background-color: #1aa034;
		font-weight:500 ;
		color: rgba(255,255,255,0.9);
		width: 100%;
	}
	
	// uni-text{
	// 	display: inline-block;
	// 	white-space: nowrap;
	// }
	
	uni-image{
		height: 100%;
		width: 100%;
	}
	
	.plc{
		color: #e1e1e1;
	}
	
	button::after{
		border:0;
	}
	.login-page{
		width: 100%;
		// height: 100vh;
		>.login-header{
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			>.login-header-content{
				width: 85%;
				>.login-header-logo{}
				>.login-title{
					font-size: 40rpx;
					font-weight: 600;
				}
				>.login-title-describe{
					margin-top:10rpx ;
					font-size: 25rpx;
					color: rgb(173,173,173); 
				}
			}
		}
		
		>.login-body{
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 55rpx;
			>.login-body-content{
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 85%;
				background-color: #fff;
				border-radius: 15rpx;
				height: 200rpx;
				>.login-tel-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					>.user-tel{
						margin-left: 30rpx;
						font-weight: 600;
					}
					>.get-security-code-btn{
						display: inline-block;
						margin-right: 30rpx;
						font-weight: 600;
						width: 250rpx;
						// color: #e9322e;
					}
				}
				>.login-tel-bottom{
					margin-left: 30rpx;
					font-weight: 600;
				}
			}
			
			.login-btn-box{
				margin-top: 40rpx;
				display: flex;
				width: 85%;
				justify-content: space-between;
				>.immediately-login{
					width: 60%;
				}
			}
			
			.protocol-box{
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 50rpx;
				font-size: 25rpx;
				>.protocol-contents{
					width: 85%;
				}
			}
		}
		
		
		
		
		
		.login-footer{
			display: flex;
			// position: fixed;
			// bottom: 0;
			width: 100%;
			justify-content: center;
			margin-top: 450rpx;
			>.login-footer-content{
				display: flex;
				width: 80%;
				flex-direction: column;
				align-items: center;
				>.login-footer-title{
					position: relative;
					font-size: 26rpx;
					&:after{
						content: "";
						position: absolute;
						left: 0;
						// height: 100rpx;
						border: 1px rgb(187, 186, 185) solid;
						width: 50rpx;
						top: 49%;
						left: -60rpx;

					}
					&:before{
						content: "";
						position: absolute;
						right: 0;
						// height: 100rpx;
						border: 1px rgb(187, 186, 185) solid;
						width: 50rpx;
						top: 49%;
						right: -60rpx;

					}
				}
				>.logo-list{
					margin-top: 35rpx;
					height: 100%;
					display: flex;
					width: 80%;
					justify-content: space-evenly;
					>.logo-list-item{
						display: flex;
						justify-content: center;
						align-items: center;
						// overflow: hidden;
						height: 75rpx;
						width: 75rpx;
						border: 1rpx rgb(242, 235, 231) solid ;
						border-radius: 50%;
						>.logo-list-item-content{
							height: 65%;
							// width: 60%;
						}
					}
				}
			}
		}
	}
</style>
